<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>提交订单</title>
		<link rel="stylesheet" type="text/css" href="../../c-asserts/aui/css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../c-asserts/aui/css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../c-asserts/aui/css/common.css" />
		<style>
			html, body {
				background: #e5e5e5;
			}
			#main-content {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
			}
			.aui-content {
				-webkit-overflow-scrolling: touch;
				margin-top: 15px;
			}
			.aui-inline-bottom {
				display: inline-block;
				vertical-align: bottom;
			}
		</style>
	</head>
	<body>
		<div id="warp">
			<header id="header">
				<nav class="aui-bar aui-bar-nav">
					<a class="aui-pull-left" tapmode onclick="javascript:history.back(-1);"> <span class="aui-iconfont aui-icon-left"></span>返回 </a>
					<div class="aui-title">
						<strong>提交订单</strong>
					</div>
				</nav>
			</header>
			<div id="main-content" ms-controller="order-info">
				<div class="aui-content">
					<ul class="aui-list-view">
						<li class="aui-list-view-cell theme-info">
							<p class="aui-col-xs-9 aui-ellipsis-1 J-theme-title">
								{{themename}}
							</p>
							<span class="aui-col-xs-3 J-price">￥{{price}}</span>
						</li>
						<li class="aui-list-view-cell">
							<p class="aui-col-xs-6 J-mount">
								{{mount}}
							</p>
							<div class="aui-counter aui-pull-right">
								<div class="tap aui-counter-minus aui-disabled active" tapmode></div>
								<input class="aui-counter-input" type="text" value="" data-origin="">
								<div class="tap aui-counter-plus active" tapmode></div>
							</div>
						</li>
						<li class="aui-list-view-cell J-pay J-totalPay">
							<p class="aui-col-xs-10">
								小计
							</p>
							<span class="aui-col-xs-2 aui-text-danger" data-totalPay>￥{{totalPay}}</span>
						</li>
					</ul>
				</div>
				<div class="aui-content">
					<ul class="aui-list-view">
						<li class="aui-list-view-cell J-discount">
							<div class="aui-arrow-right">
								<p>
									优惠券
								</p>
								<span class="aui-badge" data-discount-id="0" data-discount-fee="0">您目前暂无可使用的优惠券</span>
							</div>
						</li>
						<li class="aui-list-view-cell J-realPay">
							<p class="aui-col-xs-8">
								总价
							</p>
							<div class="aui-col-xs-2">
								<label class="aui-pull-right"><h6 class="aui-inline-bottom">(共1张)</h6></label>
							</div>
							<span class="aui-col-xs-2 aui-text-danger" data-realPay>￥{{realPay}}</span>
						</li>
					</ul>
				</div>
				<div class="aui-content">
					<ul class="aui-user-view">
						<li class="aui-list-view-cell">
							<p>
								请选择支付方式
							</p>
						</li>
						<li class="aui-user-view-cell aui-img">
							<div class="aui-col-xs-10"><img class="aui-img-object aui-pull-left" src="../../c-image/pay/wxpay.png">
								<div class="aui-img-body">
									微信支付
									<p class='aui-ellipsis-2'>
										推荐已安装微信5.0及以上的客户使用
									</p>
								</div>
							</div>
							<div class="aui-col-xs-2">
								<input class="aui-pull-right aui-radio aui-radio-info" type="radio" name="payType" value="0" checked="true" >
							</div>
						</li>
						<li class="aui-user-view-cell aui-img">
							<div class="aui-col-xs-10">
								<img class="aui-img-object aui-pull-left" src="../../c-image/pay/apay.png">
								<div class="aui-img-body">
									支付宝支付
									<p>
										推荐已安装支付宝钱包的客户使用
									</p>
								</div>
							</div>
							<div class="aui-col-xs-2">
								<input class="aui-pull-right aui-radio aui-radio-info" type="radio" name="payType" value="1">
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="aui-content aui-content-padded">
				<div id="submitBtn" class="aui-btn aui-btn-warning aui-btn-block">
					确认订单
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../c-script/api.js"></script>
	<script type="text/javascript" src="../../c-script/public.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			api.parseTapmode();
			var header = $api.byId("header");
			$api.fixStatusBar(header);
			$api.fixIos7Bar(header);
			//			pageParam:{themeId:1,themeName:'逃离火山口原始森林',teamId:1,members:5,maxPlayers:7,themePrice:20000,priceType:1,discountNum:2}
			$api.text($api.dom('#main-content > div.aui-content > ul > li p.J-theme-title'), api.pageParam.themeName);
			$api.text($api.dom('#main-content .J-price'), '￥' + api.pageParam.displayPrice + (api.pageParam.priceType == 0 ? '/人' : '/场'));
			$api.text($api.dom('#main-content .J-mount'), api.pageParam.priceType == 0 ? '数量（张）' : '订场（元）');
			var counterInputEl = $api.dom('#main-content .aui-counter .aui-counter-input');
			$api.val(counterInputEl, api.pageParam.priceType == 0 ? '1' : api.pageParam.displayPrice + '');
			var counterMinusBt = $api.dom('#main-content .aui-counter .aui-counter-minus');
			var counterPlusBt = $api.dom('#main-content .aui-counter .aui-counter-plus');
			var totalPaySpan = $api.dom('#main-content li.J-totalPay span');
			var realPaySpan = $api.dom('#main-content li.J-realPay span');
			var discountSpan = $api.dom('#main-content .J-discount span');
			updateTotalPay = function(totalPayment) {
				$api.text(totalPaySpan, '￥' + (totalPayment / 100));
				$api.attr(totalPaySpan, 'data-totalPay', totalPayment);
			};
			updateRealPay = function(realPayment) {
				var discountFee = parseInt($api.attr(discountSpan, 'data-discount-fee'));
				realPayment = realPayment - discountFee;
				realPayment = realPayment > 0 ? realPayment : 0;
				$api.text(realPaySpan, '￥' + (realPayment / 100));
				$api.attr(realPaySpan, 'data-realPay', realPayment);
			};
			updateTotalPay(api.pageParam.themePrice);
			updateRealPay(api.pageParam.themePrice);
			//修改之前的原值
			$api.attr(counterInputEl, 'data-origin', counterInputEl.value);
			updatePayment = function(operate) {
				var originVal = $api.attr(counterInputEl, 'data-origin');
				var newVal = operate == 'plus' ? parseInt(originVal) + 1 : operate == 'minus' ? parseInt(originVal) - 1 : counterInputEl.value;
				if (api.pageParam.priceType != 0 && parseInt(newVal) > api.pageParam.themePrice / 100) {
					api.alert({
						msg : '付款金额超过包场费用!'
					});
					$api.val(counterInputEl, originVal);
					return false;
				}
				if (api.pageParam.priceType == 0 && parseInt(newVal) > api.pageParam.maxPlayers) {
					api.alert({
						msg : '当前主题最多支持' + api.pageParam.maxPlayers + '个玩家!'
					});
					$api.val(counterInputEl, originVal);
					return false;
				}
				$api.val(counterInputEl, newVal);
				$api.attr(counterInputEl, 'data-origin', counterInputEl.value);
				// 单价购票时,同步小计及总价信息,
				$api.text($api.dom(realPaySpan.parentNode, 'h6'), '(共' + (api.pageParam.priceType == 0 ? newVal : 1) + '张)');
				var relaMoney = api.pageParam.priceType == 0 ? parseInt(newVal) * api.pageParam.themePrice : newVal;
				updateTotalPay(relaMoney);
				updateRealPay(relaMoney);
				if (parseInt(counterInputEl.value) <= 1) {
					$api.addCls(counterMinusBt, 'aui-disabled');
				} else {
					$api.removeCls(counterMinusBt, 'aui-disabled');
				}
			};
			if (parseInt(counterInputEl.value) > 1) {
				$api.removeCls(counterMinusBt, 'aui-disabled');
			};
			$api.addEvt(counterMinusBt, 'click', function() {
				if ($api.hasCls(this, 'aui-disabled')) {
					return;
				}
				if (parseInt(counterInputEl.value) <= 1) {
					$api.addCls(counterMinusBt, 'aui-disabled');
					return;
				}
				updatePayment('minus');
			});
			$api.addEvt(counterPlusBt, 'click', function() {
				$api.removeCls(counterMinusBt, 'aui-disabled');
				if ($api.hasCls(counterPlusBt, 'aui-disabled')) {
					return;
				}
				if ((api.pageParam.priceType == 0 && parseInt(this.value) > api.pageParam.maxPlayers) || (api.pageParam.priceType != 0 && parseInt(counterInputEl.value) >= api.pageParam.themePrice / 100)) {
					return;
				}
				updatePayment('plus');
			});
			$api.addEvt(counterInputEl, 'change', function() {
				updatePayment('update');
			});
			if (api.pageParam.discountNum != null && api.pageParam.discountNum > 0) {
				$api.toggleCls(discountSpan, 'aui-badge-info');
				$api.text(discountSpan, '您目前拥有' + api.pageParam.discountNum + '优惠券');
			}
			$api.addEvt(discountSpan.parentNode, 'click', function() {
				if (api.pageParam.discountNum != null && api.pageParam.discountNum > 0) {
						//	themeId : 1,priceType : 1

					 location.href="../user/privilegewin.html";
				}
			});
			var apayModule = api.require('aliPay');
			alipayment = function(configuration) {
				apayModule.payOrder(configuration, function(ret, err) {
					var resltCode = ret.code;
					api.alert({
						msg : ret.code == 9000 ? '订单付款成功 :)' : ret.code + "　" + ret.statusMessage, // JSON.stringify(ret),
					});
					if (resltCode == 9000) {
						api.closeWin({
							duration : 50
						});
					}
				});
			}
			var wxPayModule = api.require('wxPay');
			wxpayment = function(configuration) {
				wxPayModule.payOrder(configuration, function(ret, err) {
					if (ret && ret.status) {
						api.alert({
							msg : '订单付款成功 :)'
						}, function(ret, err) {
							api.closeWin({
								duration : 50
							});
						});
						return;
					}
					var errorMsg = '订单付款失败,微信错误码=';
					errorMsg += err ? err.code : '未知';
					api.alert({
						msg : errorMsg
					});
				});
			}
			$api.addEvt($api.byId('submitBtn'), 'click', function() {
				var orderInfo = api.pageParam;
				var payTypeRaido = $api.dom($api.byId("main-content"), "input[type='radio'][name='payType']:checked");
				orderInfo.ticketNum = api.pageParam.priceType == 0 ? counterInputEl.value : 1;
				orderInfo.discountId = $api.attr(discountSpan, 'data-discount-id');
				orderInfo.realPayment = $api.attr(realPaySpan, 'data-realPay');
				orderInfo.needPayment = $api.attr(totalPaySpan, 'data-totalPay');
				orderInfo.payType = payTypeRaido != null ? payTypeRaido.value : 0;
				// 默认支付
				orderInfo.userCode = $api.getStorage('code');
				$api.toggleCls(this, 'aui-disabled');
				//				wxpayment({
				//					"sign" : "33C32007277598193D76BF35756472E3",
				//					"timeStamp" : "1463466650",
				//					"package" : "Sign=WXPay",
				//					"partnerId" : "1338242401",
				//					"nonceStr" : "3674907992298368",
				//					"orderId" : "wx2016051714305402c27c05e50954286778"
				//				});
				callSvr("order/submit.json", orderInfo, function(result, err) {
					if (result != null && result.isSuccess && result.data) {
						if (result.data.paytype == 1) {
							alipayment(result.data.alipayconfig);
						} else {
							wxpayment(result.data.wxpayconfig);
						}
					} else {
						console.log(JSON.stringify(err));
						api.alert({
							msg : '提交订单失败，未知异常！'
						});
						$api.toggleCls(this, 'aui-disabled');
					}
				});
			});
			api.addEventListener({
				name : 'useDiscount'
			}, function(ret, err) {
				var param = ret.value;
				if (param == null || param.discountId < 1 || param.discountType < 0 || param.discountQuota < 0) {
					api.alert({
						msg : '优惠券加载失败，请重试！'
					});
					return false;
				}
				$api.attr(discountSpan, 'data-discount-id', param.discountId);
				var discountQuota = param.discountQuota;
				// 名单券抵用全额
				if (param.discountType == 2) {
					discountQuota = api.pageParam.themePrice;
				}
				$api.attr(discountSpan, 'data-discount-fee', discountQuota);
				$api.text(discountSpan, (param.discountType == 2 ? '免单券' : '现金券') + '抵用' + (discountQuota / 100) + '元');
				var realPayment = parseInt($api.attr(realPaySpan, 'data-realPay'));
				realPayment = realPayment < 1 ? 0 : realPayment;
				updateRealPay(realPayment);
			});
		};
	</script>
</html>
